<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
        }
        .header{
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 80px;
            color: coral;
            background-color: rgb(111, 153, 129);

        }
        /* 嵌套选择器  空格代表后代 */
        .header .left{
            height: 100%;
            width: 200px;
            background-color: rgb(235, 221, 235);
            float: left;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            color:blue;
            margin-left: 20px;
        }
        .header .right{
            height: 100%;
            width: 200px;
            background-color: rgb(224, 224, 240);
            float: right;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            color: brown;
            margin-right: 20px;
        }
        .content{
            height: calc(100vh - 100px - 80px);
            background-color: sienna;
            /* 超出部分隐藏 */
            /* overflow: hidden; */

            /* 超出产生滚动条， 不超出没有滚动条 */
            overflow: auto;

            padding-top: 10px;
        }
        .content .leader{
            width: 100%;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            color: rgb(27, 155, 214);
            height: 80px;
        }

        .content .child{
            width: calc((100% - 50px) / 4);
            height: 200px;
            background-color: darkorange;
            margin-right: 10px;
            margin-bottom: 10px;
            line-height: 100px;
            font-size: 30px;
            color: rgb(241, 245, 6);
            text-align: center;
            float: left;
        }
        /* 找到.child, 并且child作为别人的4n+1的元素 */
        .content .child:nth-child(4n+1){
            margin-left: 10px;
        }
        .footer{
            height: 80px;
            background-color: springgreen;
            /* 内部文字水平居中 */
            text-align: center;
            /* 内部文字垂直居中 */
            line-height: 50px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <!-- div.header -->
    <div class="header">百度一下，你就知道
        <div class="left">你好，请登录</div>
        <div class="right">退出</div>
    </div>
    <!-- 体部 -->
    <div class="content">
        <div class="leader">热门影视推荐</div>
        <div class="child">急先锋</div>
        <div class="child">金刚川</div>
        <div class="child">哪吒之魔童降世</div>
        <div class="child">烈火英雄</div>
        <div class="child">紧急救援</div>
        <div class="child">中国机长</div>
        <div class="child">哈哈哈哈哈之很高兴遇见你</div>
        <div class="child">奔跑吧兄弟</div>
    </div>
    <!-- 尾部 -->
    <div class="footer">爱奇艺独家冠名播出</div>
</body>
</html>